<template>
  <m-header-title headerTitle="newsDetail" @goBack='goBack'/>
  <div class="news-detail" v-if='detail.content'>
    <h5>{{ detail.title }}</h5>
    <div class="name flex-row">
      <span>{{ detail.author_name }}</span>
      <div class="flex-row like-div">
        {{ i18n.$t('storeUp') }}&nbsp;&nbsp;
        <p class="icon-right" @click="checkLike">
          <van-icon
            :name="[detail.active ? 'like' : 'like-o']"
            :class="[detail.active ? 'show' : 'hide']"
          />
        </p>
      </div>
    </div>
    <p class="date">{{ detail.date }}</p>
    <div v-html="detail.content" class="news-text"></div>
    <!-- <iframe :src="detail.url" frameborder="0"></iframe> -->
  </div>
  <div class='no-msg' v-else>
    <van-icon name="description" />
    <p>数据已用光，请明天再试~</p>
  </div>
</template>

<script lang="ts">
import {
  toRefs,
  defineComponent,
  onMounted,
  reactive,
} from 'vue'

import { MHeaderTitle } from '@/components'

//接口
import { getNewsDetail, addCellect } from '@/config/api'

//路由
import { useRouter, useRoute } from 'vue-router'
//缓存
import { useStore } from 'vuex'

import { useI18n } from '@/i18nPlugin'

import { Toast } from 'vant'

export default defineComponent({
  nem: 'newsDetail',
  components: {
    MHeaderTitle,
  },
  setup: () => {
    const i18n = useI18n()
    const router = useRouter()
    const route = useRoute()
    const store = useStore() // 使用useStore方法
    const data = reactive({
      detail: {
        id: '',
        content: '',
        active: false, //收藏状态
        title: '',
        author_name: '',
        thumbnail_pic_s: '',
        img: '',
        date: '',
      },
    })
    let initData = () => {
      let req = {
        uniquekey: route.query.id,
      }
      getNewsDetail(req).then((res: any) => {
        if (res.data.detail) {
          data.detail = res.data.detail
          data.detail.content = res.data.content
          data.detail.id = res.data.uniquekey
        } else {
        }
      })
    }
    let checkLike = () => {
      data.detail.active = !data.detail.active
      // addCellectFunc()
      if (data.detail.active) Toast('收藏成功😊')
      else Toast('取消收藏😟')
    }
    let addCellectFunc = () => {
      let req = {
        title: data.detail.title,
        author_name: data.detail.author_name,
        date: data.detail.date,
        uniquekey: data.detail.id,
        img: data.detail.thumbnail_pic_s,
        userCode: store.state.userData.userCode,
      }
      // console.log(JSON.parse(JSON.stringify(req)))
      addCellect(req).then((res: any) => {
        // console.log(res)
        if(res.data.responseCode === 1000) {
          router.replace(store.state.detailBackType)
        }
      })
    }
    const goBack = () => {
      console.log(JSON.parse(JSON.stringify(data)))
      if (data.detail.active && store.state.userData.userCode) {
        addCellectFunc()
      } else if (data.detail.content) {
        store.commit('SET_NEWS_DETAILS', data.detail)
        router.replace(store.state.detailBackType)
      } else {
        router.replace(store.state.detailBackType)
      }
    }
    onMounted(() => {
      console.log(store.state.detailBackType)
      // console.log(JSON.parse(JSON.stringify(store.state.newsDetails)))
      // console.log(store.state.userCode)
      let isHttp = true
      //查找本地数据，存在则取本地缓存，else取接口
      store.state.newsDetails.forEach((item: any) => {
        if (item.id === route.query.id) {
          data.detail = item
          isHttp = false
          // console.log(data)
        }
      })
      if (isHttp) {
        initData()
      }
    })
    return {
      checkLike,
      goBack,
      initData,
      onMounted,
      i18n,
      ...toRefs(data),
    }
  },
})
</script>

<style scoped lang="scss">
.news-detail {
  padding: 70px 5% 60px 5%;
  h5 {
    font-size: 20px;
    margin: 10px 0;
  }
  .name {
    margin-left: 5px;
    color: #ccc;
    font-size: 12px;
  }
  .date {
    text-align: right;
    font-size: 14px;
    margin: 10px 0;
  }
}
.news-text {
  font-size: 14px;
  margin: 10px 0;
}
.news-text p {
  margin: 5px 0;
}
.icon-right {
  position: relative;
  .like {
    position: absolute;
    font-size: 24px;
    right: 0;
    top: -13px;
    width: 24px;
    transition: all 0.2s linear;
  }
}
.show {
  color: red;
  font-size: 26px;
}
.hide {
  color: #ccc !important;
  font-size: 26px;
}
.no-msg {
  padding-top: 100px;
  min-height: 500px;
  .van-icon{
    font-size: 100px;
    color: #ccc;
  }
  .van-icon,.van-icon:before {
    display: block;
    text-align: center;
  }
  p {
    color: #ccc;
    font-size: 12px;
    margin-top: 20px;
    text-align: center;
  }
}
</style>
